@use 'sass:color';

#sprite-editor {
    // a pcui gridview doesn't have a default style for the disabled state
    .pcui-gridview.pcui-disabled {
        opacity: $disabled-opacity;
    }

    // tweak item spacing
    .pcui-gridview-item {
        height: 104px;

        canvas {
            margin: 6px 0;
        }
    }

    // brighter than the default
    .pcui-gridview-item-text {
        color: $text-primary;
    }

    > .pcui-overlay-inner {
        background-color: rgba($bcg-darkest, 0.9);
    }

    > .pcui-overlay-content {
        width: 90%;
        height: 90%;

        > .root-panel {
            height: 100%;

            > .pcui-panel-header {
                border: 1px solid $border-primary;
            }

            .close {
                font-size: 16px;
                color: $text-secondary;
                background-color: transparent;
                border: none;
                box-shadow: none;

                &:hover {
                    color: $text-primary;
                }
            }

            > .pcui-panel-content {
                display: flex;
                flex-direction: row;
                height: 100%;

                .middle-panel {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;

                    .canvas {
                        height: 100%;
                        width: 100%;

                        $checkerboard-dark: #eaeaea;

                        background-color: #fff;
                        background-image:
                            linear-gradient(45deg, $checkerboard-dark 25%, transparent 25%, transparent 75%, $checkerboard-dark 75%, $checkerboard-dark 100%),
                            linear-gradient(45deg, $checkerboard-dark 25%, transparent 25%, transparent 75%, $checkerboard-dark 75%, $checkerboard-dark 100%);
                        background-size: 24px 24px;
                        background-position: 0 0, 12px 12px;
                    }

                    &.grab {
                        cursor: grab;
                    }

                    &.grabbing {
                        cursor: grabbing;
                    }

                    &.ew-resize {
                        cursor: ew-resize;
                    }

                    &.ns-resize {
                        cursor: ns-resize;
                    }

                    &.nwse-resize {
                        cursor: nwse-resize;
                    }

                    &.nesw-resize {
                        cursor: nesw-resize;
                    }

                    &.move {
                        cursor: move;
                    }
                }

                .left-columns {
                    height: 100%;

                    .left-rows {
                        height: 100%;
                    }
                }

                .left-panel {
                    > .pcui-panel-content {
                        height: 100%;
                        padding: 6px;
                    }
                }

                .right-panel {
                    top: 0;
                    height: 100%;
                    right: 0;
                    border: 1px solid $border-primary;
                    box-sizing: border-box;

                    > .pcui-panel-content {
                        > .ui-panel {
                            > .content {
                                padding: 8px 6px;

                                .field-button {
                                    text-align: center;
                                }
                            }
                        }
                    }

                    .ui-panel.buttons {
                        > .content {
                            flex-wrap: wrap;

                            > .ui-button.icon {
                                margin-bottom: 0;
                                margin-top: 0;
                                flex-basis: 0;
                            }

                            .ui-panel.frames {
                                width: 100%;
                                margin-top: 10px;
                            }
                        }
                    }

                    .asset-preview-container {
                        canvas {
                            height: 100%;
                        }
                    }

                    .ui-panel.add-frames-info,
                    .ui-panel.import-error {
                        border: 1px solid $text-active;
                        margin: 3px 3px 10px;
                        padding: 10px 15px;
                        font-size: 12px;
                        background: $bcg-darkest;

                        > .ui-header {
                            background: transparent;
                            padding: 0;

                            &::before {
                                @extend .font-icon;

                                content: '\E400';
                                float: left;
                                margin-right: 5px;
                                margin-left: -3px;
                                font-size: 20px;
                                font-weight: 100;
                            }
                        }

                        .ui-label {
                            margin: 0;
                            line-height: 1.5;
                        }
                    }

                    .ui-panel.import-error {
                        border-color: #fb222f;
                    }
                }

                .frames {
                    .frame {
                        background-color: $bcg-dark;
                        border: 1px solid $bcg-darker;
                        padding: 5px;
                        white-space: nowrap;

                        &:hover {
                            background-color: $bcg-darker;
                            cursor: pointer;
                        }

                        &.selected {
                            background-color: $bcg-darkest;
                        }

                        &.dragged {
                            background-color: color.adjust($bcg-darkest, $lightness: -2%);
                        }

                        .handle {
                            float: left;
                            width: 12px;
                            height: 24px;
                            margin: 2px 8px 2px 2px;
                            cursor: move;

                            @extend .noSelect;

                            $color: color.mix($text-darkest, $bcg-primary, 50%);
                            $size: 6px;
                            $inner-radius: 20%;
                            $outer-radius: 55%;

                            background: radial-gradient($color $inner-radius, transparent $outer-radius);
                            background-size: $size $size;

                            &:hover {
                                $color: $text-primary;

                                background: radial-gradient($color $inner-radius, transparent $outer-radius);
                                background-size: $size $size;
                            }
                        }

                        &.sprite-frame {
                            border: 1px solid $text-active;
                            background-color: $bcg-dark;
                        }

                        &.highlighted {
                            background-color: $bcg-darkest;
                        }

                        .ui-label.name,
                        .pcui-label.name {
                            font-size: 12px;
                            vertical-align: top;
                            margin-left: 5px;
                            max-width: calc(100% - 31px);
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        canvas {
                            background-color: color.adjust($text-darkest, $lightness: -10%);
                            border: 1px solid $border-primary;
                            vertical-align: middle;
                        }

                        .ui-button.remove,
                        .pcui-button.remove {
                            @extend .font-icon;

                            width: 32px;
                            margin: 0;
                            padding: 0;
                            position: absolute;
                            right: 0;
                            font-size: 14px;
                            text-align: center;
                            background-color: transparent;
                            color: $text-darkest;
                            border: none;
                            box-shadow: none;

                            &:hover {
                                color: #d34141;
                            }

                            &::after {
                                content: '\E124';
                                font-weight: 200;
                            }
                        }
                    }

                    .frame.sprite-frame + .frame.sprite-frame {
                        border-top: 0;
                        margin-top: 1px;
                    }
                }

                .ui-button.icon {
                    background-color: $bcg-dark;

                    &:hover {
                        background-color: $bcg-darkest;

                        &::before {
                            color: $text-active;
                        }

                        &.remove::before {
                            color: #d34141;
                        }
                    }

                    &.wide {
                        width: calc(100% - 6px);
                    }

                    font-size: 12px;
                    border: none;
                    position: relative;
                    height: 28px;
                    line-height: 30px;
                    padding-left: 28px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    text-transform: uppercase;
                    text-align: left;

                    @extend .font-bold;

                    &::before {
                        @extend .font-icon;

                        font-size: 14px;
                        text-align: center;
                        margin-left: -18px;
                        margin-right: 9px;
                        font-weight: 100;
                    }

                    &.create::before {
                        content: '\E120';
                    }

                    &.remove::before {
                        content: '\E124';
                    }

                    &.cancel::before {
                        content: '\E132';
                    }

                    &.trim::before {
                        content: '\E394';
                    }

                    &.focus::before {
                        content: '\E397';
                    }

                    &.generate::before {
                        content: '\E398';
                    }

                    &.upload::before {
                        content: '\E222';
                    }
                }
            }
        }
    }
}
